<template>
  <div class="wave-box">
    <div class="wave-user">
      <img
        src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
        alt=""
      />
      <span>name</span>
    </div>
    <div class="wave-song">
      <div class="wave-top">
        <div>fdfadfadfadfa</div>
        <div>09:08</div>
      </div>
      <div class="wave-center">
        <av-waveform
          ref="player"
          :canv-width="width"
          :canv-height="40"
          noplayed-line-color="grey"
          :playtime="false"
          caps-color="#FFF"
          :bar-color="['#f00', '#ff0', '#0f0']"
          canv-fill-color="#000"
          :caps-height="2"
          :audio-src="require('@/assets/jq22.mp3')"
        ></av-waveform>
      </div>
      <div class="wave-bottom">
        <div>
          <img :src="require('@/assets/hand1.png')" alt="" /><img
            :src="require('@/assets/hand1.png')"
            alt=""
          /><img :src="require('@/assets/hand1.png')" alt="" />
        </div>
        <div><img :src="require('@/assets/hand1.png')" alt="" /></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Avator",
  props: {
    width: {
      default: 1200,
      type: Number,
    }
  },
  mounted() {
    const audio = this.$refs.player;

    audio.audio.style.display = "none";
  },
};
</script>

<style scoped>
.wave-box {
  height: 90px;
  width: 100%;
  display: flex;
  font-size: 14px;
  margin: 12px;
  margin-left: 24px;
  background-color: rgb(61, 59, 59);
  padding-left: 12px;
  box-sizing: border-box;
}
.wave-user {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-right: 12px;
}
.wave-user > img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.wave-song {
  display: flex;
  flex-direction: column;
}
.wave-top {
  display: flex;
  justify-content: space-between;
}
.wave-center {
  flex: 1;
}
.wave-bottom {
  display: flex;
  justify-content: space-between;
}
</style>
